<template>
  <div class="cartoon-form-container">
    <el-card>
      <!-- 查询表单 -->
      <el-form :inline="true" :model="queryForm" @keyup.enter="sqlSelect" class="query-form">
        <el-form-item>
          <el-input v-model="queryForm.job_title" placeholder="工作标题" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="queryForm.city" placeholder="城市" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryForm.job_match" placeholder="是否符合条件" clearable class="job-match-select">
            <el-option :value="true" label="符合"></el-option>
            <el-option :value="false" label="不符合"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryForm.is_delivery" placeholder="是否可以投递" clearable class="job-match-select">
            <el-option value="可以投递" label="可以投递"></el-option>
            <el-option value="已失效" label="已失效"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
              v-model="queryForm.start_time"
              type="datetime"
              placeholder="开始时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              :shortcuts="dateShortcuts"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker
              v-model="queryForm.end_time"
              type="datetime"
              placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="sqlSelect">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="deleteBatchHandle()">批量删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="deleteAll()">一键清除</el-button>
        </el-form-item>
      </el-form>

      <!-- 显示查询结果 -->
      <el-table :data="dbRows"
                style="width: 100%"
                border :resizable="true"
                @selection-change="handleSelectionChange"
                v-model="selectedRows"
      >
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="boss_name" label="公司名字" show-overflow-tooltip>
          <template  #default="scope">
            <p class="enlarge-button" @click="enlargeContent(scope.row.boss_name)">{{ scope.row.boss_name }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="job_title" label="工作标题" show-overflow-tooltip>
          <template  #default="scope">
            <p class="enlarge-button" @click="enlargeContent(scope.row.job_title)">{{ scope.row.job_title }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="job_detail" label="工作详情" show-overflow-tooltip>
          <template  #default="scope">
            <p class="enlarge-button" @click="enlargeContent(scope.row.job_detail)">{{ scope.row.job_detail }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="job_match" label="是否符合条件" show-overflow-tooltip>
          <template  #default="scope">
            <p class="enlarge-button" @click="enlargeContent(scope.row.job_match)">{{ scope.row.job_match=='true' ? '符合' : '不符合' }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="into_time" label="匹配时间" show-overflow-tooltip>
          <template  #default="scope">
            <p class="enlarge-button" @click="enlargeContent(scope.row.into_time)">{{ scope.row.into_time }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="user_inclination" label="用户期望工作" show-overflow-tooltip>
          <template  #default="scope">
            <p class="enlarge-button" @click="enlargeContent(scope.row.user_inclination)">{{ scope.row.user_inclination }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="city" label="城市" show-overflow-tooltip>
          <template  #default="scope">
            <p class="enlarge-button" @click="enlargeContent(scope.row.city)">{{ scope.row.city }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="is_delivery" label="是否可以投递" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
          <template #default="scope">
            <el-button type="primary" link @click="greet(scope.row)">打招呼</el-button>
            <el-button type="primary" link @click="sqlDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 固定分页组件容器 -->
      <div class="pagination-container">
        <el-pagination
            small
            background
            layout="prev, pager, next"
            :total="totalItems"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            :current-page="currentPage"
            @current-change="handlePageChange"
        />
      </div>
    </el-card>


    <!-- 遮罩层 -->
    <div v-if="showEnlargedContent"
         class="enlarged-content-overlay"
         @click="showEnlargedContent = false"
         style="transition: opacity 0.3s ease;"
    ></div>

    <!-- 放大显示的内容 -->
    <transition name="fade">
      <div v-if="showEnlargedContent"
           class="enlarged-content"
           style="transition: opacity 0.3s ease;"
      >
        <div class="enlarged-content-inner">
          <div class="content-body" v-html="enlargedContent"></div>
        </div>
      </div>
    </transition>


  </div>
</template>


<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";

// 分页状态
const dbRows = ref([]);
const currentPage = ref(1);
const pageSize = ref(8);
const pageSizes = ref([10, 20, 50, 100]);

const totalItems = ref(0);
// 查询表单数据
const queryForm = reactive({
  id:'',//顺序
  user_phone: '', // 替换为实际的电话号码
  user_inclination: '', // 替换为实际的倾向性  倾向的工作
  user_job_expect:'',// 用户的介绍 人工智能部分
  is_delivery:'可以投递',//是否投递 0不投递 1投递
  job_title: '', // 替换为实际的工作标题
  job_detail: '', // 替换为实际的工作详情
  job_match: '', // 替换为实际的匹配信息
  additional_greet: '', // 替换为实际的额外问候
  into_time: '', // 使用当前时间作为插入时间
  city:"",
  page:'',
  limit:'',
  order: 'id',
  asc: true,
  start_time:'',//开始的时间
  end_time:''//结束时间
});
const dateShortcuts = [
  {
    text: '今天',
    value: () => {
      const start = new Date();
      start.setHours(0, 0, 0);
      return start;
    }
  },
  {
    text: '昨天',
    value: () => {
      const start = new Date();
      start.setDate(start.getDate() - 1);
      start.setHours(0, 0, 0);
      return start;
    }
  },
  {
    text: '最近一周',
    value: () => {
      const start = new Date();
      start.setDate(start.getDate() - 7);
      start.setHours(0, 0, 0);
      return start;
    }
  }
];

// 控制放大内容和遮罩层显示的状态
const enlargedContent = ref(""); // 放大显示的内容
const showEnlargedContent = ref(false); // 控制放大内容的显示

// 点击行放大内容的方法
const enlargeContent = (content: string) => {
  enlargedContent.value = content;
  console.log('---------',content)
  showEnlargedContent.value = true;
};


const sqlSelect = async () => {
  // 创建一个新的对象，包含 queryForm 的值和分页相关参数
  const data = {
    ...queryForm,
    page: currentPage.value,
    limit: pageSize.value,
    order: 'id',
    asc: true
  };

  console.log('查看传递信息参数',data)
  // 调用 API 并传递新创建的 data 对象
  const result = await window.bossHandleApi.dbSelect(data);
  dbRows.value = result; // 假设 API 返回的结果包含 rows 字段
  // totalItems.value = result.total; // 假设 API 返回的结果包含 total 字段
  sqlTotal()
  console.log('结果数据  result data：', dbRows.value);
};

// 处理分页变化
const handlePageChange = async (page) => {
  currentPage.value = page;
  await sqlSelect();
};

// 数据库删除
const sqlDelete = async (id: any) => {
  console.log('打印传递的 id', id);

  ElMessageBox.confirm('确定进行删除操作?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
      .then(() => {
        // 用户点击了确定按钮
        const data = {
          ids: [id]
        };

        // 调用 API 执行删除操作
        window.bossHandleApi.dbDelete(data);
        ElMessage.success('删除成功')
        setTimeout(()=>{},1000)
        // 删除成功后重新加载数据
        sqlSelect();
        sqlTotal()
      })
      .catch(() => {})
};
//greet 打招呼
const greet = async (row: any)=>{
  //先判断是否是失效的
  console.log('打印传递进来的row',JSON.stringify(row))
  // if (row.is_delivery == '可以投递'){
  //
  // }
  if (row.is_delivery == '已失效'){
    ElMessage.error('该信息已经失效')
  }

  window.bossHandleApi.greetTitle(JSON.stringify(row))
}

//一键清除
const deleteAll = async ()=>{
  ElMessageBox.confirm('确定进行删除操作?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
      .then(() => {
        // 用户点击了确定按钮

        // 调用 API 执行删除操作
        window.bossHandleApi.dbDeleteAll();
        ElMessage.success('删除成功')
        // 删除成功后重新加载数据
        sqlSelect();
        sqlTotal()
      })
      .catch(() => {})
}
//deleteBatchHandle

//total
const sqlTotal = async () => {
  // 创建一个新的对象，包含 queryForm 的值和分页相关参数
  const data = {
    ...queryForm,
    page: currentPage.value,
    limit: pageSize.value,
    order: 'id',
    asc: true
  };

  console.log('查看传递信息参数',data)
  // 调用 API 并传递新创建的 data 对象
  const result = await window.bossHandleApi.dbTotal(data);
  totalItems.value = result; // 假设 API 返回的结果包含 total 字段
  console.log('结果total  result data：', result);
};

const selectedRows = ref([]);
const handleSelectionChange = (rows: any) => {
  selectedRows.value = rows;
};
// deleteBatchHandle 批量删除
const deleteBatchHandle = async ()=>{
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的项');
    return;
  }

  ElMessageBox.confirm('确定进行批量删除操作?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    // 用户点击了确定按钮
    const ids = selectedRows.value.map(row => row.id);

    const data = {
      ids: ids
    };

    // 调用 API 执行删除操作
    window.bossHandleApi.dbDelete(data);
    ElMessage.success('批量删除成功');
    // 删除成功后重新加载数据
    await sqlSelect();
    await sqlTotal()
  }).catch(() => {});
}
onMounted(async ()=>{
  await sqlSelect();
  await sqlTotal()
})
</script>


<style scoped>
/* 查询表单样式 */
.query-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  .el-form-item {
    margin-right: 10px;
  }

  .job-match-select {
    width: 150px;
  }
}

/* 分页组件容器 */
.pagination-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 300px;
  display: flex;
  justify-content: flex-end;
}

/* 放大内容样式 */
.enlarged-content-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  cursor: pointer;
}

.enlarged-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 500px;
  max-height: 500px;
  overflow: auto;
  background-color: white;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  z-index: 2001;
  transition: transform 0.3s ease;
}

.enlarged-content-inner {
  padding: 20px;
  position: relative; /* Relative position for close button */
}
</style>